<template>
  <div class="container">
    <div class="mask"
         v-if="mark">
      <div class="ticketBox"
           v-if="isPhoto">
        <p class="title">
          上传术后照片即可开启补贴
          <span class="close"
                @click="closeTicketBox">×</span>
        </p>
        <ul class="img_list clearfix"
            :class="{height1 : ul1 , height2 : ul2 , height3 : ul3}">
          <li class="upImg upImg1"
              v-for="(item,index) in img_arr"
              :key="index">
            <img v-if="img_arr[index]"
                 :src="imgUrl+item"
                 alt
                 class="icon" />
            <span class="del"
                  @click="del_image(index)">×</span>
          </li>
          <li class="upImg bgImg"
              :key="index"
              @click="upimg"
              v-if="img_arr.length<9"></li>
        </ul>
        <button :disabled="isDisabled"
                class="subBtn"
                :class="isDisabled == false?'red':''"
                @click="submitEvent">{{btnText}}</button>
      </div>
      <div class="tip"
           v-if="isTips">
        <div class="content">
          上次预支积分消费
          <span class="num">¥555</span>，将从每月待发放积分中等比扣除
        </div>
        <div class="btn"
             @click="closeTips">确定</div>
      </div>
    </div>
    <div class="notice"
         @click="tapNotice"
         v-if="notify">公告：积分发放暂停通知</div>
    <scroll-view :scroll-y="true"
                 :style="{'height': '92%'}">
      <div class="contentbox">
        <div class="top-box">
          <p class="p1">
            <span class="s1">项目单号：{{list.order_sn}}</span>
            <span class="s2"
                  v-if="list.new_status != null">{{list.new_status}}</span>
          </p>
        </div>
        <div class="center-box">
          <div class="left">
            <img v-if="imgUrl&&list.image"
                 :src="imgUrl+list.image"
                 alt />
          </div>
          <div class="right">
            <p class="p1">{{list.project_name}}</p>
            <p class="p2">
              <span class="s1">{{list.hospital_name}}</span>
            </p>
          </div>
        </div>
      </div>
      <div class="msg-box">
        <ul>
          <li>
            <span class="sL">完成项目时间</span>
            <span class="sR">{{list.operation_time}}</span>
          </li>
          <li>
            <span class="sL">手术医生</span>
            <span class="sR">{{list.doctors_name}}</span>
          </li>
          <li>
            <span class="sL">手术金额</span>
            <span class="sR">¥{{list.operate_money}}</span>
          </li>
          <li>
            <span class="sL">实付金额</span>
            <span class="sR">¥{{actual_money}}</span>
          </li>
          <!-- 退款完成 -->
          <li v-if="list.is_return == 1 && list.refund_money > 0">
            <div class="tui_money">已退款¥{{list.refund_money}}</div>
          </li>
          <!-- 退款未完成 -->
          <li v-if="list.is_return == 0 && list.refund_money > 0">
            <div class="tui_money">已退款¥{{list.refund_money}}</div>
          </li>
        </ul>
      </div>
      <!-- 超级提速卡 -->
      <div class="tisuBox">
        <div class="title">超级提速卡</div>
        <ul class="num">
          <li class="item"
              v-for="(val,index) in tisu_num"
              :key="index"
              :class="accelerate.periods && val.text >=  accelerate.periods ?'item1':''">第{{val.text}}期</li>
          <!-- <li class="item">第36期</li>
          <li class="item">第20期</li>
          <li class="item">第12期</li>
          <li class="item">第6期</li>-->
        </ul>
        <div class="amountBar">
          <div class="bar">
            <!-- 业绩区间 -->
            <span class="yejiArr current_yeji"
                  :style="{left:current_yeji_left}">当前完成:￥{{accelerate.achieve_now}}</span>
            <span class="yejiArr"
                  :class="accelerate.achieve_now >=item ?'yejiArr1':''"
                  v-for="(item,index) in accelerate.achieve_standard"
                  :key="index">￥{{item}}</span>
            <!-- 四个圆球 -->
            <span class="item item1"></span>
            <span class="item item2"
                  :class="accelerate.achieve_now==0?'':accelerate.achieve_now< mark1?'jianbian':''">
              <img src="https://img.ameimeika.com/h5_images/mp_images/3.17/done.png"
                   alt
                   v-if="accelerate.achieve_now >=mark1"
                   class="img" />
            </span>
            <span class="item item3"
                  :class="accelerate.achieve_now>mark1?'jianbian':''">
              <img src="https://img.ameimeika.com/h5_images/mp_images/3.17/done.png"
                   alt
                   v-if="accelerate.achieve_now >= mark2"
                   class="img" />
            </span>
            <span class="item item4"
                  :class="accelerate.achieve_now > mark2?'jianbian':''">
              <img src="https://img.ameimeika.com/h5_images/mp_images/3.17/done.png"
                   alt
                   v-if="accelerate.achieve_now >=mark3"
                   class="img" />
            </span>
            <!-- 完成部分的进度条 -->
            <div class="plane"
                 :style="{width:iswidth,background:bgcolor}"></div>
            <!-- 飞机 -->
            <img src="https://img.ameimeika.com/h5_images/mp_images/3.17/huojian.png"
                 alt
                 class="img"
                 :style="{left:isleft}" />
          </div>
        </div>
        <div class="amountBar customer">
          <div class="bar">
            <!-- 客户区间 -->
            <span class="yejiArr current_yeji"
                  :style="{left:current_kehu_left}">当前完成:{{accelerate.lower_level_now}}人</span>
            <span class="yejiArr"
                  :class="accelerate.lower_level_now >=item ?'yejiArr1':''"
                  v-for="(item, index) in accelerate.lower_level_standard"
                  :key="index">{{item}}个客户</span>
            <!-- 四个球 -->
            <span class="item item1"></span>
            <span class="item item2"
                  :class="accelerate.lower_level_now==0?'':accelerate.lower_level_now< done1?'jianbian':''">
              <img src="https://img.ameimeika.com/h5_images/mp_images/3.17/done.png"
                   alt
                   v-if="accelerate.lower_level_now >=done1"
                   class="img" />
            </span>
            <span class="item item3"
                  :class="accelerate.lower_level_now > done1?'jianbian':''">
              <img src="https://img.ameimeika.com/h5_images/mp_images/3.17/done.png"
                   alt
                   v-if="accelerate.lower_level_now >= done2"
                   class="img" />
            </span>
            <span class="item item4"
                  :class="accelerate.lower_level_now > done2?'jianbian':''">
              <img src="https://img.ameimeika.com/h5_images/mp_images/3.17/done.png"
                   alt
                   v-if="accelerate.lower_level_now >= done3"
                   class="img" />
            </span>
            <!-- 已完成的长度 -->
            <div class="plane"
                 :style="{width:iswidth1,background:bgcolor1}"></div>
            <img src="https://img.ameimeika.com/h5_images/mp_images/3.17/huojian.png"
                 alt
                 class="img"
                 :style="{left:isleft1}" />
          </div>
        </div>
        <div class="rules">
          <div class="p1">提速规则：</div>
          <p class="p1">1.3倍业绩+3个客户加速至20期,5倍业绩+5个客户加速至12期,10倍业绩+10
            个客户加速至6期。</p>
          <p class="p1">2.新进经销商加盟后,必须在4月30号前自身项目打板完成,才可参与超级加速。</p>
          <p class="p1">
            3.新进经销商加速,需要自打板完成之日起,在2020年7月31日前推荐一定的客户和业绩
            才能享有加速权益,超过2020年7月31日业绩不纳入考核范畴。
          </p>
          <br />
        </div>
      </div>
      <div class="msg-box"
           v-if="list.allowance_money != 0 && (list.refund_money!== list.actual_money)">
        <ul>
          <li>
            <span class="sL">补贴总额</span>
            <span class="sR">
              <span class="fc">{{list.all_credit}}</span>
              <span v-if="list.coin >= 0">(含可提现{{list.coin}})</span>
            </span>
          </li>
          <li class="line">
            <span class="sL">补贴期数</span>
            <span class="sR color">{{list.apply_num}}个月</span>
          </li>
          <li>
            <span class="sL">补贴方式</span>
            <span class="sR color">积分</span>
          </li>
          <li>
            <span class="sL">待发补贴</span>
            <span class="sR color">{{list.await_credit}}</span>
          </li>
        </ul>
      </div>
      <div class="msg-box2"
           v-if="allowance_trans[0] && (list.refund_money!== list.actual_money)">
        <ul v-if="list.already_num <36 ">
          <li v-if="allowance_trans.length== 1 && list.already_num == 1"
              style="color:#999">
            <p class="left">下一期</p>
            <p>暂停</p>
            <p class="right">
              <span class="text1"
                    style="width:85px"
                    v-if="list.img6_handle==0 || list.img6_handle==3">上传术后照片即可开启补贴</span>
              <span class="text1"
                    style="width:85px"
                    v-if="list.img6_handle==1">术后照片审核中</span>
            </p>
          </li>
          <!-- 第一期待返回或者返回了第一期-->
          <li v-if="allowance_trans.length == 1">
            <p class="left gray"
               v-if="list.allowance_trans[0].number == 0 ">下一期</p>
            <p class="left"
               v-if="list.allowance_trans[0].number == 1 ">第1期</p>
            <p class="gray"
               v-if="list.allowance_trans[0].number == 0 ">{{list.allowance_trans[0].created_at}}</p>
            <p v-if="list.allowance_trans[0].number == 1 ">{{list.allowance_trans[0].created_at}}</p>
            <p class="right gray"
               v-if="list.allowance_trans[0].number == 0">
              <span>积分{{list.allowance_trans[0].total_credit}}</span>
              <br />
              <span v-if="list.allowance_trans[0].coin >0">(可提现{{list.allowance_trans[0].coin}})</span>
            </p>
            <p class="right"
               v-if="list.allowance_trans[0].number == 1">
              <span>积分{{list.allowance_trans[0].total_credit}}</span>
              <br />
              <span v-if="list.allowance_trans[0].coin >0">(可提现{{list.allowance_trans[0].coin}})</span>
            </p>
          </li>
          <!-- 已返第一期  如果下一期返回在allowance_trans，那第二条数据置灰-->
          <li v-for="(item ,i) in allowance_trans"
              :key="i"
              v-if="allowance_trans.length == 2">
            <p class="left"
               v-if="item.number !== 0">第{{item.number}}期</p>
            <p class="left gray"
               v-if="item.number == 0">下一期</p>
            <p :class="{'gray':i == 0}">{{item.created_at}}</p>
            <p class="right"
               :class="{'gray':i == 0}">
              <span>积分{{item.total_credit}}</span>
              <img :src="ImgBaseUrl+'mp_2.4/butietishi-icon/xinxi@2x.png'"
                   class="icon"
                   @click="tips(item,i)"
                   v-if="item.alter_status == 1" />
              <br />
              <span v-if="item.coin >0">(可提现{{item.coin}})</span>
            </p>
          </li>
          <!-- 已返两期以上 -->
          <li v-for="(item ,i) in allowance_trans"
              :key="i"
              :class="{'gray':i == 0}"
              v-if="list.already_num > 1">
            <p class="left"
               v-if="item.number != 0">第{{item.number}}期</p>
            <p class="left"
               v-if="item.number == 0">下一期</p>
            <p v-if="item">{{item.created_at}}</p>
            <p v-if="item.status == 0">暂停</p>
            <p class="right">
              <span>积分{{item.total_credit}}</span>
              <img :src="ImgBaseUrl+'mp_2.4/butietishi-icon/xinxi@2x.png'"
                   class="icon"
                   @click="tips(item,i)"
                   v-if="item.alter_status == 1" />
              <br />
              <span v-if="item.coin >0"
                    class="fc">(可提现{{item.coin}})</span>
            </p>
          </li>
        </ul>
        <ul v-if="list.already_num >=36 && (list.refund_money!== list.actual_money)">
          <li v-for="(item ,i) in allowance_trans"
              :key="i">
            <p class="left">第{{item.number}}期</p>
            <p>{{item.time}}</p>
            <p class="right">
              <span>积分{{item.total_credit}}</span>
              <img :src="ImgBaseUrl+'mp_2.4/butietishi-icon/xinxi@2x.png'"
                   class="icon"
                   @click="tips(item,i)"
                   v-if="item.alter_status == 1" />
              <br />
              <span v-if="item.coin >0"
                    class="fc">(可提现{{item.coin}})</span>
            </p>
          </li>
        </ul>
      </div>

      <div class="zhanwei"></div>
      <button class="checkBtn"
              @click="checkin">查看补贴协议</button>
    </scroll-view>
    <div class="footer-box">
      <div class="dt msgDataMsg">
        <p class="p1">补贴单提交日期</p>
        <p class="p2">{{list.created_at}}</p>
      </div>
      <div class="dt dt1">
        <button @click="openMask"
                class="btn pinl"
                v-if="list.already_num == 1 && (list.img6_handle == 0 || list.img6_handle == 3) && (list.refund_money!==list.actual_money)">上传术后照片</button>
        <button @click="toScoring(id,list.comment_status)"
                class="btn pinl"
                v-if="(list.comment_status == 0 || list.comment_status == 2) && (list.refund_money!==list.actual_money)">评价</button>
      </div>
    </div>
  </div>
</template>

<script>
import common from "@/assets/js/mmk_common.js";
export default {
  data () {
    return {
      ImgBaseUrl: "https://h5.ameimeika.com/mp_images/",
      currentTab: 0,
      imgUrl: common.image_response,
      id: "",
      list: [],
      allowance_trans: [],
      isshow: false,
      created_at: "", //补贴单生成日期,
      first_time: "",
      sec_time: "",
      ope_money: 0, //手术金额
      actual_money: 0, //实付金额，此字段仅用做展示，不计算
      img_arr: [],
      arr1: [],
      tempFilePaths: [],
      ul1: false, //相册样式
      ul2: false, //相册样式
      ul3: false, //相册样式
      isDisabled: true,
      mark: false,
      already_num: "",
      isPhoto: false,
      isTips: false,
      arr: "",
      btnText: "",
      notify: false,
      tisu_num: [
        {
          text: 36
        },
        {
          text: 20
        },
        {
          text: 12
        },
        {
          text: 6
        }
      ],
      accelerate: 0,
      iswidth: 0, //业绩进度条  已完成的宽度值
      bgcolor: "", //业绩进度条 颜色控制
      isleft: "-1000%", //业绩  飞机的位置
      current_yeji_left: "-1000%", //业绩  文案 left距离
      isleft1: "-1000%", //客户 飞机的位置
      current_kehu_left: "-1000%", //客户 文案 left距离
      iswidth1: 0, //客户进度条  已完成的宽度值
      bgcolor1: "", //客户进度条 颜色控制
      mark1: 0,
      mark2: 0,
      mark3: 0,
      done1: 0,
      done2: 0,
      done3: 0
    };
  },
  onLoad: function (options) {
    Object.assign(this.$data, this.$options.data());
    this.id = options.str; //补贴单列表传过来的id
    this.list = [];
    this.allowance_trans = [];
    this.img_arr = [];
    this.notify = false;
    wx.setNavigationBarTitle({
      title: "补贴单详情"
    });
    this.getData();
  },
  onShow () {
    this.notify = false;
    if (wx.getStorageSync("bt_order") == "1") {
      //补贴单刷新标记
      this.mark = false;
      this.img_arr = [];
      this.getData();
      wx.setStorageSync("bt_order", "");
    }
  },
  methods: {
    getData () {
      // this.mark = false;
      // this.img_arr = [];
      common.mmk_Loading(0);
      common.fly_post(
        "api/v4_2/order_project/subsidy_show",
        {
          id: this.id
        },
        msg => {
          common.mmk_Loading(1);
          let res = msg.data;
          if (res.status_code == 0) {
            this.list = res.data;
            this.ope_money = parseInt(res.data.operate_money).toFixed(0);
            this.actual_money = parseInt(res.data.actual_money);
            this.list.refund_money = parseInt(this.list.refund_money);
            this.id = res.data.id;
            this.allowance_trans = res.data.allowance_trans;
            this.list.operation_time = new Date(
              this.list.operation_time * 1000
            ).Format("yyyy-MM-dd");
            this.list.created_at = new Date(this.list.created_at * 1000).Format(
              "yyyy-MM-dd"
            );
            this.list.allowance_trans.forEach(ele => {
              ele.timer = ele.created_at;
              ele.created_at = new Date(ele.created_at * 1000).Format(
                "yyyy-MM-dd"
              );
            });
            // 加速卡状态处理
            if (this.list.accelerate) {
              this.accelerate = this.list.accelerate;
              var arr = this.accelerate.achieve_standard;
              // this.accelerate.achieve_now = 450000
              // 业绩判断
              if (arr[0]) {
                this.mark1 = arr[0];
              } else {
                this.mark1 = true;
              }
              if (arr[1]) {
                this.mark2 = arr[1];
              } else {
                this.mark2 = true;
              }
              if (arr[2]) {
                this.mark3 = arr[2];
              } else {
                this.mark3 = true;
              }
              if (this.accelerate.achieve_now == 0) {
                this.iswidth = "14.09%";
                this.bgcolor = "#FF383E";
              } else if (
                this.accelerate.achieve_now > 0 &&
                this.accelerate.achieve_now < arr[0]
              ) {
                this.iswidth = "37.18%";
                this.bgcolor =
                  "linear-gradient(270deg,rgba(244,210,211,1) 0%,rgba(255,56,62,1) 100%);";
                this.isleft = "18%";
                this.current_yeji_left = "15%";
              } else if (this.accelerate.achieve_now == arr[0]) {
                this.iswidth = "37.18%";
                this.bgcolor = "#FF383E";
                this.isleft = "-1000%";
                this.current_yeji_left = "-1000%";
              } else if (
                arr[0] < this.accelerate.achieve_now &&
                this.accelerate.achieve_now < arr[1]
              ) {
                this.iswidth = "62.66%";
                this.bgcolor =
                  "linear-gradient(270deg,rgba(244,210,211,1) 0%,rgba(255,56,62,1) 100%);";
                this.isleft = "44%";
                this.current_yeji_left = "39%";
                //  console.log(this.iswidth)
              } else if (this.accelerate.achieve_now == arr[1]) {
                // console.log(999)
                this.iswidth = "62.66%";
                this.bgcolor = "#FF383E";
                this.isleft = "-1000%";
                this.current_yeji_left = "-1000%";
              } else if (
                arr[1] < this.accelerate.achieve_now &&
                this.accelerate.achieve_now < arr[2]
              ) {
                this.iswidth = "88.16%";
                this.bgcolor =
                  "linear-gradient(270deg,rgba(244,210,211,1) 0%,rgba(255,56,62,1) 100%);";
                this.isleft = "70%";
                this.current_yeji_left = "65%";
                console.log(this.iswidth);
              } else if (this.accelerate.achieve_now >= arr[2]) {
                this.iswidth = "100%";
                this.bgcolor = "#FF383E";
                this.isleft = "2000%";
                this.current_yeji_left = "2000%";
                // console.log(this.iswidth);
              }
              //客户区间
              var arr1 = this.accelerate.lower_level_standard;
              // this.accelerate.lower_level_now = 10
              if (arr1[0]) {
                this.done1 = arr1[0];
              } else {
                this.done1 = true;
              }
              if (arr1[1]) {
                this.done2 = arr1[1];
              } else {
                this.done2 = true;
              }
              if (arr1[2]) {
                this.done3 = arr1[2];
              } else {
                this.done3 = true;
              }
              if (this.accelerate.lower_level_now == 0) {
                this.iswidth1 = "14.09%";
                this.bgcolor1 = "#FF383E";
              } else if (
                this.accelerate.lower_level_now > 0 &&
                this.accelerate.lower_level_now < arr1[0]
              ) {
                this.iswidth1 = "37.18%";
                this.bgcolor1 =
                  "linear-gradient(270deg,rgba(244,210,211,1) 0%,rgba(255,56,62,1) 100%);";
                this.isleft1 = "18%";
                this.current_kehu_left = "15%";
              } else if (this.accelerate.lower_level_now == arr1[0]) {
                this.iswidth1 = "37.18%";
                this.bgcolor1 = "#FF383E";
                this.isleft1 = "-10000%";
                this.current_kehu_left = "-10000%";
              } else if (
                arr1[0] < this.accelerate.lower_level_now &&
                this.accelerate.lower_level_now < arr1[1]
              ) {
                this.iswidth1 = "62.66%";
                this.bgcolor1 =
                  "linear-gradient(270deg,rgba(244,210,211,1) 0%,rgba(255,56,62,1) 100%);";
                this.isleft1 = "44%";
                this.current_kehu_left = "39%";
                console.log(this.iswidth1);
              } else if (this.accelerate.lower_level_now == arr1[1]) {
                this.iswidth1 = "62.66%";
                this.bgcolor1 = "#FF383E";
                this.isleft1 = "-10000%";
                this.current_kehu_left = "-10000%";
              } else if (
                arr1[1] < this.accelerate.lower_level_now &&
                this.accelerate.lower_level_now < arr1[2]
              ) {
                this.iswidth1 = "88.16%";
                this.bgcolor1 =
                  "linear-gradient(270deg,rgba(244,210,211,1) 0%,rgba(255,56,62,1) 100%);";
                this.isleft1 = "70%";
                this.current_kehu_left = "65%";
              } else if (this.accelerate.lower_level_now >= arr1[2]) {
                this.iswidth1 = "100%";
                this.bgcolor1 = "#FF383E";
                this.isleft1 = "2000%";
                this.current_kehu_left = "2000%";
                console.log(this.iswidth);
              }
            }
            if (res.data.notify !== null) {
              this.notify = true;
            }
            if (this.list.img6_handle == 3) {
              this.btnText = "提交";
            } else {
              this.btnText = "下一步";
            }
          } else {
            common.mmk_Loading(1);
            common.mmk_Loading(2, res.message);
            return false;
          }
        }
      );
    },
    sortNumber (arr) {
      var min;
      for (var i = 0; i < arr.length; i++) {
        for (var j = i; j < arr.length; j++) {
          if (arr[i] > arr[j]) {
            min = arr[j];
            arr[j] = arr[i];
            arr[i] = min;
          }
        }
      }
      return arr;
    },
    //删除补贴单
    del_sub () {
      let that = this;
      wx.showModal({
        title: "",
        content: "确认删除补贴单？",
        success: function (res) {
          if (res.confirm) {
            common.mmk_Loading(0);
            common.fly_post(
              "api/v4_2/user_order_apply/del",
              {
                id: that.id
              },
              msg => {
                common.mmk_Loading(1);
                let res = msg.data;
                if (res.status_code == 0) {
                  common.mmk_Loading(2, "删除成功");
                  setTimeout(() => {
                    wx.navigateBack({
                      delta: 1 //返回的页面数，如果 delta 大于现有页面数，则返回到首页,
                    });
                  }, 1500);
                } else {
                  common.mmk_Loading(1);
                  common.mmk_Loading(2, res.message);
                  return false;
                }
              }
            );
          } else {
            common.mmk_Loading(2, "取消");
          }
        }
      });
    },
    // 跳转到评论页
    toScoring (id, status) {
      wx.navigateTo({
        url: `/pages/package_projects/evaluation_subsidy/main?id=${id}&status=${status}`
      });
    },
    //上传手术照片
    upimg: function () {
      let that = this;
      if (this.img_arr.length < 9) {
        wx.chooseImage({
          count: 1, //1张
          sizeType: ["compressed"],
          success: res => {
            common.mmk_Loading(2, "上传中...");
            res.tempFilePaths.forEach(item => {
              console.log(item);
              wx.uploadFile({
                url: common.base_url + "api/v4_2/upload",
                filePath: item,
                name: "file",
                formData: {
                  dirPath: "comment",
                  upload_status: true
                },
                header: {},
                success: res => {
                  let result = JSON.parse(res.data);
                  common.mmk_Loading(2, "图片上传成功");
                  let arr = [...that.img_arr];
                  arr.push(result.data.url);
                  that.img_arr = arr;
                  if (that.img_arr.length > 1) {
                    that.isDisabled = false;
                  } else {
                    that.isDisabled = true;
                  }
                },
                fail: () => {
                  common.mmk_Loading(2, "图片上传失败");
                }
              });
            });
          }
        });
      } else {
        common.mmk_Loading(2, "最多上传9张图片");
      }
    },
    del_image (index) {
      let that = this;
      that.img_arr.splice(index, 1);
      let arr = [...that.arr1];
      that.delPhoto(arr[index]);
      arr.splice(index, 1);
      that.arr1 = arr;
      if (that.img_arr.length > 1) {
        that.isDisabled = false;
      } else {
        that.isDisabled = true;
      }
    },
    openMask () {
      this.mark = true;
      this.isPhoto = true;
    },
    closeTicketBox () {
      this.mark = false;
      this.isPhoto = false;
    },
    submitEvent () {
      if (this.img_arr.length < 2) {
        this.isDisabled = true;
        return false;
      }
      if (this.list.img6_handle == 3) {
        //审核失败后直接提交
        common.mmk_Loading(0);
        common.fly_post(
          "api/v4_2/issue/submit",
          {
            id: this.id,
            type: 0,
            images: this.img_arr.join(",")
          },
          msg => {
            common.mmk_Loading(1);
            let res = msg.data;
            if (res.status_code == 0) {
              var that = this;
              wx.showToast({
                title: res.message, //提示的内容,
                icon: "none", //图标,
                duration: 2000, //延迟时间,
                mask: true, //显示透明蒙层，防止触摸穿透,
                success: res => {
                  that.mark = false;
                  that.img_arr = [];
                  that.arr1 = [];
                  that.getData();
                }
              });
            } else {
              common.mmk_Loading(2, res.message);
            }
          }
        );
      } else {
        //跳调查问卷
        wx.navigateTo({
          url:
            `/pages/package_mine/questionnaire_survey/main?id=` +
            this.id +
            `&images=` +
            this.img_arr.join(",")
        });
      }
    },
    delPhoto (e) {
      //删除照片
      common.fly_post(
        "api/v4_2/oss_image/del",
        {
          file_name: e
        },
        msg => { }
      );
    },
    tips (item, i) {
      let start_time = this.allowance_trans[i + 1].timer;
      wx.navigateTo({
        url: `/pages/package_projects/cost_detail/main?id=${this.id}&end_time=${
          item.timer
          }&start_time=${start_time}&num=${item.number}`
      });
    },
    closeTips () {
      this.mark = false;
      this.isTips = false;
    },
    tapNotice () {
      wx.showModal({
        title: this.list.notify.title,
        content: this.list.notify.desc,
        showCancel: false,
        confirmText: "我知道了",
        confirmColor: "#FF383E",
        success (res) {
          if (res.confirm) {
          } else if (res.cancel) {
          }
        }
      });
    },
    checkin () {
      //跳转到补贴协议
      // wx.navigateTo({
      //   url: "/pages/package_mine/agreement/main"
      // })
      common.mmk_Loading(
        2,
        "小程序当前不支持此功能，请前往美美咖app进行用户合作协议签署，谢谢合作"
      );
    }
  }
};
</script>

<style lang="less" scoped>
* {
  margin: 0;
  padding: 0;
}

.wh() {
  width: 100%;
  height: 100%;
}

.bd() {
  border: 1px solid red;
}

.bg() {
  background: #888888;
}

.text {
  position: relative;
  height: 20px;
  font-size: 14px;
  color: #999999;
  line-height: 20px;
  text-align: center;
  top: 226px;
}
.container {
  width: 100%;
  height: 100%;
  background: #fbfbfb;
  position: relative;
  .mask {
    width: 100%;
    height: 100%;
    position: absolute;
    background: rgba(0, 0, 0, 0.47);
    z-index: 999;
    .ticketBox {
      width: 100%;
      height: auto;
      box-sizing: border-box;
      background-color: #fff;
      position: fixed;
      bottom: 0px;
      left: 0;
      border-radius: 5px;
      // padding: 0 8px 10px 10px;
      .title {
        height: 17px;
        font-weight: 600;
        font-size: 12px;
        color: #333;
        line-height: 17px;
        text-align: center;
        position: relative;
        margin: 15px 0 20px;
        .close {
          width: 40px;
          height: 44px;
          font-size: 20px;
          color: #666;
          position: absolute;
          right: 0;
        }
      }
      .subBtn {
        width: 100%;
        height: 49px;
        font-size: 17px;
        color: #fff;
        outline: none;
        border: none;
        line-height: 49px;
        background-color: #ccc;
        margin-top: 5px;
        border-radius: 0;
        &.red {
          background: #ff383e;
        }
      }
      .img_list {
        width: 100%;
        height: 108px;
        padding: 0 15px;
        box-sizing: border-box;
        background-size: 100% 100%;
        background-repeat: no-repeat;
        .upImg {
          width: 104px;
          height: 104px;
          box-sizing: border-box;
          text-align: center;
          padding-top: 15px;
          margin-right: 11px;
          margin-bottom: 10px;
          font-size: 12px;
          float: left;
          position: relative;
          &.upImg1 {
            padding-top: 0;
            margin-bottom: 10px;
            .icon {
              width: 104px;
              height: 100%;
            }
            .del {
              width: 20px;
              height: 20px;
              background: rgba(255, 255, 255, 1);
              box-shadow: 0px 2px 4px 0px rgba(0, 0, 0, 0.49);
              border-radius: 50%;
              color: #888;
              position: absolute;
              right: -5%;
              top: -9%;
              font-size: 20px;
              line-height: 20px;
              text-align: center;
            }
          }
          &.bgImg {
            background-image: url("https://h5.ameimeika.com/mp_images/mp_2.1/other/bg_subsidy_increase.png");
            background-size: 100% 100%;
            background-repeat: no-repeat;
          }
        }
      }
      .height1 {
        height: 218px;
      }
      .height2 {
        height: 332px;
      }
      &.height3 {
        height: 446px;
      }
    }
    .tip {
      width: 74%;
      height: 153px;
      background-color: #fff;
      font-size: 16px;
      color: rgba(51, 51, 51, 1);
      line-height: 22px;
      z-index: 9999;
      border-radius: 8px;
      transform: translate(18%, 122%);
      .content {
        height: 70%;
        box-sizing: border-box;
        padding: 33px 24px 0px;
        text-align: center;
        border-bottom: 1px solid #e2e2e2;
        .num {
          color: #ff383e;
        }
      }
      .btn {
        height: 29.5%;
        color: #ff383e;
        font-size: 17px;
        text-align: center;
        line-height: 42px;
      }
    }
  }
  .notice {
    height: 30px;
    padding: 0 15px;
    box-sizing: border-box;
    background-color: #fededf;
    color: #333;
    font-size: 12px;
    line-height: 30px;
  }
  .contentbox {
    border-top: 1px solid #ddd;
    background: #fff;
    box-sizing: border-box;
    padding-left: 10px;
    padding-top: 10px;
    width: 100%;
    .top-box {
      .p1 {
        margin-bottom: 10px;
        .s1 {
          font-size: 12px;
          color: #666666;
        }
        .s2 {
          float: right;
          color: #f64665;
          font-size: 12px;
          font-weight: bold;
          margin-right: 10px;
        }
      }
    }
    .center-box {
      height: 60px;
      padding-bottom: 10px;
      .left {
        float: left;
        width: 60px;
        height: 60px;
        img {
          .wh;
        }
      }
      .right {
        position: relative;
        float: right;
        width: 300px;
        height: 100%;
        box-sizing: border-box;
        padding-left: 5px;
        p {
          &.p1 {
            padding-right: 10px;
            font-size: 14px;
            font-weight: bold;
            color: #444444;
            line-height: 20px;
            text-overflow: -o-ellipsis-lastline;
            overflow: hidden;
            text-overflow: ellipsis;
            display: -webkit-box;
            -webkit-line-clamp: 2;
            line-clamp: 2;
            -webkit-box-orient: vertical;
          }
          &.p2 {
            position: absolute;
            font-size: 12px;
            color: #999999;
            left: 0;
            bottom: 0;
            height: 15px;
          }
        }
      }
    }
  }

  .msg-box {
    margin-top: 10px;
    background-color: #fff;
    padding: 5px 10px;
    li {
      border: 1px solid #fff;
      width: 100%;
      height: 30px;
      box-sizing: border-box;

      &.line {
        border-top: 1px solid #e0e0e0;
      }
      span {
        display: inline-block;
        height: 100%;
      }
      .sL {
        float: left;
        font-size: 12px;
        font-weight: bold;
        color: #444;
        line-height: 25px;
        .bookimg {
          width: 13px;
          height: 13px;
        }
      }
      .sR {
        float: right;
        font-size: 12px;
        color: #666666;
        line-height: 25px;
        .fc {
          color: #ff7100;
          font-weight: bold;
        }
      }
    }
  }
  // 提速卡样式
  .tisuBox {
    width: 100%;
    height: 320px;
    box-sizing: border-box;
    // padding: 10px 0px;
    background: #fff;
    margin-top: 10px;
    .title {
      height: 37px;
      font-size: 12px;
      font-weight: 500;
      line-height: 37px;
      color: #333;
      // line-height: 17px;
      border-bottom: 1px solid #e0e0e0;
      margin-left: 15px;
    }
    .num {
      width: 100%;
      height: 16px;
      margin-top: 10px;
      margin-bottom: 37px;
      .item {
        width: 48px;
        height: 16px;
        border-radius: 8px;
        background: rgba(170, 170, 170, 0.1);
        color: #c0c0c0;
        text-align: center;
        line-height: 16px;
        float: left;
        margin-left: 36px;
        font-size: 10px;
        box-sizing: border-box;
        &.item:nth-of-type(1) {
          background: rgba(255, 139, 139, 0.1);
          color: #ff383e;
        }
        &.item1 {
          background: rgba(255, 139, 139, 0.1);
          color: #ff383e;
        }
      }
    }
    // 金额样式
    .amountBar {
      width: 100%;
      // height: 6px;
      background: #fff;
      text-align: center;
      margin-bottom: 50px;
      &.customer {
        margin-bottom: 39px;
        margin-top: 62px;
        .bar {
          .item {
            .img {
              width: 20px;
              height: 20px;
            }
            &.item2 {
              // left: 34.32%;
              // top: -100%;
              .img {
                width: 20px;
                height: 20px;
                position: absolute;
                top: 0;
                left: 0;
              }
            }
            &.item3 {
              // left: 59.7%;
              // top: -100%;
              .img {
                width: 20px;
                height: 20px;
                position: absolute;
                top: 0;
                left: 0;
              }
            }
            &.item4 {
              // right: 8.9%;
              // top: -100%;
              .img {
                width: 20px;
                height: 20px;
                position: absolute;
                top: 0;
                left: 0;
              }
            }
            &.jianbian {
              background: linear-gradient(
                90deg,
                rgba(255, 182, 185, 1) 0%,
                rgba(235, 235, 235, 1) 100%
              );
            }
          }
        }
      }
      .bar {
        width: 89%;
        height: 6px;
        background: rgba(235, 235, 235, 1);
        border-radius: 5px;
        position: relative;
        margin: 0 auto;
        .item {
          position: absolute;
          width: 20px;
          height: 20px;
          background: #ebebeb;
          border-radius: 50%;
          z-index: 999;
          &.item1 {
            left: 8.9%;
            top: -116%;
            background: url("https://img.ameimeika.com/h5_images/mp_images/3.17/done.png")
              no-repeat;
            background-size: 100% 100%;
          }
          &.item2 {
            left: 34.32%;
            top: -116%;
            .img {
              width: 20px;
              height: 20px;
              position: absolute;
              top: 0;
              left: 0;
            }
          }
          &.item3 {
            left: 59.7%;
            top: -116%;
            .img {
              width: 20px;
              height: 20px;
              position: absolute;
              top: 0;
              left: 0;
            }
          }
          &.item4 {
            right: 8.9%;
            top: -116%;
            .img {
              width: 20px;
              height: 20px;
              position: absolute;
              top: 0;
              left: 0;
            }
          }
          &.jianbian {
            background: linear-gradient(
              90deg,
              rgba(255, 182, 185, 1) 0%,
              rgba(235, 235, 235, 1) 100%
            );
          }
        }
        .plane {
          // width: 47px;
          height: 8px;
          background: rgba(255, 56, 62, 1);
          border-radius: 5px;
          position: absolute;
          left: 0;
          top: -1px;
          z-index: 98;
        }
        .img {
          width: 38px;
          height: 18px;
          position: absolute;
          // top: -160%;
          top: -100%;
          left: 15%;
          z-index: 999;
        }
        .yejiArr {
          color: rgba(192, 192, 192, 1);
          font-size: 10px;
          position: absolute;
          bottom: -22px;
          left: 31%;
          &.yejiArr1 {
            color: #ff383e;
          }
          &.yejiArr:nth-of-type(2) {
            left: 31%;
          }
          &.yejiArr:nth-of-type(3) {
            left: 57%;
          }
          &.yejiArr:nth-of-type(4) {
            left: 83%;
          }
          &.current_yeji {
            top: -22px;
            left: 15%;
            color: #ff383e;
          }
        }
      }
    }
    //客户进度条样式
    // .customer {
    //   width: 100%;
    //   // height: 6px;
    //   background: #fff;
    //   text-align: center;
    //   margin-bottom: 50px;
    //   &.customer {
    //     margin-bottom: 39px;
    //     margin-top: 62px;
    //   }
    //   .bar {
    //     width: 89%;
    //     height: 6px;
    //     background: rgba(235, 235, 235, 1);
    //     border-radius: 5px;
    //     position: relative;
    //     margin: 0 auto;
    //     .item {
    //       position: absolute;
    //       width: 20px;
    //       height: 20px;
    //       background: #ebebeb;
    //       border-radius: 50%;
    //       z-index: 999;
    //       &.item1 {
    //         left: 8.9%;
    //         top: -100%;
    //         background: url("https://img.ameimeika.com/h5_images/mp_images/3.17/done.png")
    //           no-repeat;
    //         background-size: 100% 100%;
    //       }
    //       &.item2 {
    //         left: 34.32%;
    //         top: -100%;
    //       }
    //       &.item3 {
    //         left: 59.7%;
    //         top: -100%;
    //       }
    //       &.item4 {
    //         right: 8.9%;
    //         top: -100%;
    //       }
    //     }
    //     .plane {
    //       width: 124px;
    //       height: 8px;
    //       background: linear-gradient(
    //         270deg,
    //         rgba(244, 210, 211, 1) 0%,
    //         rgba(255, 56, 62, 1) 100%
    //       );
    //       border-radius: 5px;
    //       position: absolute;
    //       left: 0;
    //       top: -1px;
    //       z-index: 98;
    //     }
    //     .img {
    //       width: 38px;
    //       height: 18px;
    //       position: absolute;
    //       top: -160%;
    //       left: 15%;
    //       z-index: 999;
    //     }
    //     .text {
    //       color: rgba(192, 192, 192, 1);
    //       font-size: 10px;
    //       position: absolute;
    //       bottom: -22px;
    //       left: 7%;
    //     }
    //   }
    // }
    .rules {
      width: 100%;
      box-sizing: border-box;
      padding: 0 14px 0 20px;
      font-size: 10px;
      line-height: 13px;
      color: rgba(153, 153, 153, 1);
      .p1 {
        margin-bottom: 6px;
      }
    }
  }
  .msg-box2 {
    margin-top: 10px;
    background-color: #fff;
    padding: 5px 10px;
    li {
      border: 1px solid #fff;
      width: 100%;
      height: 50px;
      box-sizing: border-box;
      display: flex;
      justify-items: center;
      align-items: center;
      color: #444;
      text-align: center;
      .gray {
        color: #999 !important;
      }
      p {
        flex: 1;
        display: inline-block;
        font-size: 14px;
        &:nth-child(3) {
          text-align: center;
        }
      }
      .left {
        text-align: left;
      }
      .right {
        text-align: center !important;
        .icon {
          width: 13px;
          height: 13px;
          margin-left: 3px;
        }
        .text1 {
          display: inline-block;
          width: 85px;
          height: 100%;
        }
        &.gray {
          color: #999;
        }
      }
      &.gray {
        color: #999;
      }
    }
  }

  .footer-box {
    position: fixed;
    left: 0;
    bottom: 0;
    width: 100%;
    height: 49px;
    background: #ffffff;
    box-shadow: 0px -2px 8px 0px rgba(0, 0, 0, 0.07);
    display: flex;
    justify-items: center;
    align-items: center;
    vertical-align: middle;
    .dt {
      flex: 2;
      &.dt1 {
        text-align: right;
        padding-right: 5px;
      }
      &.msgDataMsg {
        flex: 2;
        font-size: 12px;
        color: #666666;
        padding: 5px 10px;
        box-sizing: border-box;
        padding-top: 0;
        .p1 {
          margin-bottom: 2px;
        }
        .p2 {
          margin-top: 3px;
        }
      }
      .btn {
        height: 32px;
        width: 78px;
        background: #f64665;
        display: inline-block;
        font-size: 12px;
        color: #ffffff;
        line-height: 32px;
        border-radius: 40px;
        box-sizing: border-box;
        padding: 0 10px;
        margin-right: 5px;
        vertical-align: middle;
        /*  &.del{
                    background: #fff;
                    border:1px solid #999999;
                    color: #999999;
                } */
        &.pinl {
          background: #fff;
          border: 1px solid #f64665;
          color: #f64665;
        }
      }
    }
  }
}
.tui_money {
  color: #f64665;
  text-align: right;
  font-size: 11px;
}
.zhanwei {
  width: 100%;
  height: 70px;
}
.checkBtn {
  width: 140px;
  height: 32px;
  background: rgba(255, 56, 62, 1);
  border-radius: 16px;
  color: #fff;
  text-align: center;
  line-height: 32px;
  font-size: 14px;
  margin-bottom: 12px;
}
</style>


